<template>
    <div class="content">
        <div class="el-card__body">
            <el-form :model="form" :rules="rules">
                <el-form-item label="品牌名称:" prop="name">
                    <el-input v-model="form.name" size="large" />
                </el-form-item>
                <el-form-item size="large" label="品牌首字母:">
                    <el-input v-model="form.firstLetter" />
                </el-form-item>
                <el-form-item label="品牌LOGO:">
                    <el-upload class="upload-demo" action="http://120.24.64.5:8088/mall-admin/minio/upload" multiple
                        :limit="1" list-type="picture" :on-preview="handleLOGOPreview" :on-remove="handleLOGORemove"
                        :on-success="handleLOGOSuccess"
                        :before-remove="beforeLOGORemove" :on-exceed="handleLOGOExceed">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传jpg/png文件，且不超过100kb
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="品牌专区大图:">
                    <el-upload class="upload-demo" :on-success="handleBigPicSuccess" :before-remove="beforeBigPicRemove" action="http://120.24.64.5:8088/mall-admin/minio/upload" multiple
                        :limit="1" list-type="picture">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传jpg/png文件，且不超过100kb
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="品牌故事:">
                    <el-input type="textarea" v-model="form.brandStory" />
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input v-model="form.sort" size="large" />
                </el-form-item>
                <el-form-item label="是否显示:">
                    <el-radio-group v-model="showRadio" @change="showGroup(Number(showRadio))">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="品牌制造商:">
                    <el-radio-group v-model="factoryRadio" @change="factoryGroup(Number(factoryRadio))">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitFn">提交</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script setup lang="ts">
import { brandCreateApi } from "./api";
import { ref, reactive,watch } from "vue";
import { ElMessageBox, ElMessage, FormInstance } from "element-plus";
import type { UploadProps, UploadUserFile } from 'element-plus'
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const handleLOGORemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}

const handleLOGOPreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log(uploadFile)
}

const handleLOGOExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    ElMessage.warning(
        `The limit is 1, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
        } totally`
    )
}
const handleLOGOSuccess:UploadProps['onSuccess']=(response: any)=>{
console.log(response.data.url);
form.logo=response.data.url
}
const handleBigPicSuccess:UploadProps['onSuccess']=(response: any)=>{
console.log(response.data.url);
form.bigPic=response.data.url
}

const beforeLOGORemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `确定要删除图片 ${uploadFile.name} 吗?`
    ).then(
        () => true,
        () => false
    )
}
const beforeBigPicRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `确定要删除图片 ${uploadFile.name} 吗?`
    ).then(
        () => true,
        () => false
    )
}


const factoryRadio = ref("0");
const showRadio = ref("0");
const formRef = ref<FormInstance>();
const form = reactive<BrandCreateModel>({
    bigPic: "",
   brandStory: "",
    factoryStatus: 0,
    firstLetter: "",
    logo: "",
    name: "",
    showStatus: 0,
    sort: 0
});


// 品牌制造商单选
form.factoryStatus = Number(factoryRadio.value);
const factoryGroup = (factoryRadio: number) => {
    form.factoryStatus = factoryRadio;
};
// 是否显示单选
const showGroup = (showRadio: number) => {
    form.showStatus = showRadio;
};
const rules = {
    name: [{ required: true, trigger: "blur", message: "请输入品牌名称" }],
};
// 添加
const addBrand = () => {
    ElMessageBox.confirm("确定要添加品牌吗？", "添加品牌", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            brandCreateApi(form).then((res) => {
                if (res.code === 200) {
                    ElMessage.success("添加成功");
                    // formRef.value?.resetFields();
                    router.push("/pms/brand");
                }
            });
        })
        .catch(() => {

        });
};

const reset=()=>{
    form.brandStory="",
    form.factoryStatus=0,
    form.firstLetter="",
    form.name="",
    form.showStatus=0,
    form.sort=0
}

// 提交
const submitFn = () => {
    addBrand()
}

</script>

<style lang="less" scoped>
.content {
    width: 800px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: .3s;

    .el-card__body {
        width: 760px;
        padding: 20px;
    }
}
</style>